<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mixins</title>
    <script type="text/javascript" src="../assests/js/vue.js"></script>
</head>
<body>
    <h1>Mixins</h1>
    <hr>
    <p>
        <h4>Mixins一般有两种用途：</h4>
        <p>1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。</p>
        <p>2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。</p>
    </p> 
    <hr>
    <div id="app">
        <p>比分{{ num }} ：{{ price }}</p>
        <p>
            <button @click="add('甲')">甲add</button> <button @click="add('乙')">乙add</button>
        </p>
        <p>
            <button @click="fuck()">clear</button>
        </p>
    </div>
    <script>
        var addConsole = {
            updated:function(){
                console.log("数据发生了变化，变成了-实例混入+1--"+(this.num));
            },
            methods:{
                fuck:function(){
                    this.num = 0;
                    this.price = 0;
                }
            }
        }
        Vue.mixin({
            updated:function(){
                console.log("out--全局混入+1--" + (this.num));
            }
        })
        var app = new Vue({
            el:"#app",
            data:{
                num:0,
                price:10
            },
            methods:{
                add:function(name){
                    if(name == "甲"){
                        this.num++;
                    }else if(name == "乙"){
                        this.price++;
                    }
                }
            },
            updated:function(){
                console.log(this.num);
                console.log(this.price);    
            },
            mixins:[addConsole]
        });
    </script>
</body>
</html>